<template>
    <div>
        <div>
            <h2>添加商品</h2>
            <p>名称：<input type="text" v-model="goods_name"></p>
            <p>价格：<input type="text"  v-model="goods_price"></p>
            <p>单位：<input type="text" v-model="goods_unit"></p>
            <p>简介：<textarea v-model="goods_describe" cols="30" rows="10"></textarea></p>
            <p>详情：
                <mavon-editor v-model="content" ref="md" @change="change" style="min-height: 600px" />
            </p>
            <p>商品图片：<input type="file" id="img"></p>
            <p>
                所属分类：
                <select v-model="cate_id">
                    <option :value="i.id" v-for="i in cate_data">
                        {{i.cate_name}}
                    </option>
                </select>
            </p>
            <p><input type="button" value="添加" @click="addgoods" style="width:20px; height:15px"></p>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { mavonEditor } from 'mavon-editor'
// 引入编辑器样式 
import 'mavon-editor/dist/css/index.css'
export default {
    data() {
        return {
            content:'', // 输入的markdown
            html:'',    // 转成的html  
            goods_name:"",
            goods_price:"",
            goods_unit:"",
            goods_describe:"",
            cate_data:[],
            cate_id:1
        }
    },
    methods: {
        addgoods(){
            let img = document.getElementById("img").files[0]
            let form_data = new FormData()
            form_data.append("goods_name",this.goods_name)
            form_data.append("goods_price",this.goods_price)
            form_data.append('goods_unit',this.goods_unit)
            form_data.append("goods_describe",this.goods_describe)
            form_data.append("goods_img",img)
            form_data.append("cate",this.cate_id)
            form_data.append("goods_content",this.html)
            axios({
                url:"http://127.0.0.1:8000/app01/goodsapi/",
                method:"post",
                data:form_data
            }).then(res=>{
                console.log(res)
            })
        },
        change(value, render) {
            //实时获取转成html的数据
            this.html = render
            console.log(this.html)
        },
    },
    components: {
        mavonEditor
    },
    created() {
        axios({
            url:"http://127.0.0.1:8000/app01/cateapi/",
            method:"get"
        }).then(res=>{
            this.cate_data = res.data
        })
    },
}
</script>